import React, { Component } from "react";

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      counter: 0,
      title: "标题",
    };
  }
  // state = {
  //   counter: 1,
  // };
  render() {
    const { counter, title } = this.state;
    return (
      <div>
        <h1>当前计数为: {counter}</h1>
        <h2>{title}</h2>
        <button onClick={() => this.handleIncrement(2)}>+</button>
      </div>
    );
  }
  async handleIncrement(step) {
    // this.state.counter++
    // console.log(this.state.counter)
    // 对象的写法是同步的操作
    // this.setState({ counter: (this.state.counter += step) });
    // console.log(this.state.counter);
    // this.setState(
    //   (nextState) => {
    //     return {
    //       counter: (nextState.counter += step),
    //     };
    //   },
    //   () => {
    //     console.log(this.state.counter);
    //   }
    // );
    // console.log(this.state.counter);

    await this.setState((nextState) => {
      return {
        counter: (nextState.counter += step),
      };
    });
    console.log(this.state.counter);

    this.setState({
      title: "更新了",
    });
  }

  // ps:
  // 如果你修改的数据使用到源数据建议使用函数写法
  // 如果你修改的数据没有使用到源数据建议使用对象写法
}
